<!doctype>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  background-color: hsl(210, 80%, 20%);
  font-family: Helvetica, Arial, sans-serif;
}

img {
  max-width: 100%;
}

.card {
  padding: 0.5em;
  margin: 0 auto;
  background-color: white;
  max-width: 300px;
  transform: rotate(15deg);
}

    </style>
  </head>
  <body>

    <div class="card">
      <img src="images/chicken1.jpg" alt="a chicken"/>
      <h4>Mrs. Featherstone</h4>
      <p> She may be a bit frumpy, but Mrs Featherstone gets the job done. She lays her largish cream-colored eggs on a daily basis. She is gregarious to a fault.</p>
      <p>This Austra White is our most prolific producer.</p>
    </div>

    </main>
  </body>
</html>
